<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="content-wrapper" th:fragment="user-list" >
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            用户管理
            <small>用户列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">用户</a></li>
            <li class="active">用户管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">

                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">用户列表</h3>
                        <span> &nbsp;</span>
                        <td>
                            <button  class="btn btn-info"data-toggle="modal" data-target="#exampleModal" >添加</button>
                        </td>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>名字</th>
                                <th>密码</th>
                                <th>入职时间</th>
                                <th>修改</th>
                                <th>删除</th>
                            </tr>
                            </thead>
                           <tbody>

                           <tr th:each="user,staus:${users}">
                               <td th:text="${staus.count}">1</td>
                               <!-- <td th:text="|中文:${user.name}|">中文:张三</td> -->
                               <td th:text="${'中文:'+ user.name}"></td>
                               <td th:text="${user.password}">牛B</td>
                               <td th:text="${#dates.format(user.hiredate,'yyyy-MM-dd')}">2019-01-24</td>
                               <td>
                                   <button class="btn btn-warning" data-toggle="modal" data-target="#exampleModa2" data-info="1" th:data-info="${user.id}">修改</button>
                               </td>
                               <td>
                                   <a href="/user/deleteById/id=3" th:href="${'/user/deleteById/'+user.id}"  class="btn btn-danger deleteById ">删除</a>
                               </td>
                           </tr>
                           </tbody>

                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>

                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加</h4>
                </div>
                <div class="modal-body">
                    <form action="/user/add" method="post">
                        <div class="form-group">
                            <label  class="control-label">ID</label>
                            <input type="text" class="form-control" name="id" value="" >
                        </div>
                        <div class="form-group">
                            <label  class="control-label">日期</label>
                            <input class="form-control" name="hiredate" value="" >
                        </div>
                        <div class="form-group">
                            <label  class="control-label">姓名</label>
                            <input class="form-control"  name="name" value="">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">密码</label>
                            <input class="form-control"  name="password" value="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">确认</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- /.content -->
    <div class="modal fade" id="exampleModa2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabe2">修改</h4>
                </div>
                <div class="modal-body">
                    <form action="/user/upDate" method="post">
                        <input name="_method" value="put" type="hidden"/>
                        <div class="form-group">
                            <label  class="control-label">ID</label>
                            <input type="text" class="form-control" name="id" value=""  placeholder="" readonly >
                        </div>
                        <div class="form-group">
                            <label  class="control-label">日期</label>
                            <input class="form-control" name="hiredate" value="" >
                        </div>
                        <div class="form-group">
                            <label  class="control-label">姓名</label>
                            <input class="form-control"  name="name" value="">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">密码</label>
                            <input class="form-control"  name="password" value="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">确认</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $('#example1').DataTable({
                "language": {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": "没有找到记录",
                    "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤)"
                }
            });

            $(".content").on("click", ".deleteById", function () {
                if(confirm("确定要删除数据吗？")) {
                    return true;
                }
                else{
                    return false;
                }
            });
            $('#exampleModa2').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var recipient = button.data('info')
                var modal = $(this)
                $.ajax({
                    type: "get",
                    url: "/user/selectById",
                    dataType: "json",
                    data: {
                         id:recipient
                    },
                    /*success 回调成功函数*/
                    success: function (data) {
                        var result = JSON.stringify(data);

                        $("input[name='id']").val(data.id);
                        $("input[name='hiredate']").val(data.hiredate);
                        $("input[name='name']").val(data.name);
                        $("input[name='password']").val(data.password);
                    },
                    error: function () {

                        console.log('fail');
                    }
                })
            })
        })
    </script>
</div>

<!-- page script -->
